<template>
	<view class="crm">
		<!-- <u-sticky> -->
		<view class="tops1">
			<view class="searchBox">
				<view class="search">
					<view class="inp">
						<u-search :clearabled="true"  @clear="search" @search="search" bg-color="#fff" :show-action="false" height="60" search-icon=""
							placeholder-color="rgba(15, 20, 23, 0.3)" placeholder="请输入要查询的内容" v-model="keyword">
						</u-search>
					</view>
					<view class="btns" @click="search">
						搜索
					</view>
				</view>
				<image @click="show=true" class="Scan-code"
					src="https://oss.6mate.cn/mini/Calendar.png" mode="">
				</image>
			</view>

		</view>
		<!-- </u-sticky> -->
		<view v-if="list1.length" class="list" :style="{'padding-top': paddingTop}">
			<view class="item" v-for="(item,index) in list1">

				<view v-if="item.circleType=='TEXT_IMAGE'" class="detail">
					<view class="photo">
						{{item.circleCategoryName}}
					</view>
					<view class="pics">
						<view class="name">
							{{item.title}}
						</view>
						<view class="desc">
							<u-parse :html="item.content"></u-parse>
						</view>
						<view class="imgsBox">

							<u-upload :disabled="false" :deletable="false" :width="160" :height="160"
								:show-progress="false" :max-count="item.maxCount" :file-list="item.fileList"></u-upload>

						</view>
						<view class="bot">
							<view class="time">
								{{item.genTime}}
							</view>
							<view class="btngroup">
								<view class="btnItem">
									<view @click="copyTextToClipboard(item.content)" class="btn">
										<image src="https://oss.6mate.cn/mini/copyBnts.png"
											mode=""></image>
										复制文案
									</view>
								</view>
								<view class="btnItem">
									<view @click="download(item.imageUrls)" class="btn">
										<image src="https://oss.6mate.cn/mini/To-bottom.png"
											mode=""></image>
										快捷下载
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view v-else-if="item.circleType=='TEXT'" class="detail">
					<view class="photo">
						{{item.circleCategoryName}}
					</view>
					<view class="pics">
						<view class="name">
							{{item.title}}
						</view>
						<view class="desc">
							<u-parse :html="item.content"></u-parse>
						</view>
						<view class="bot">
							<view class="time">
								{{item.genTime}}
							</view>
							<view class="btngroup">
								<view class="btnItem">
									<view @click="copyTextToClipboard(item.content)" class="btn">
										<image src="https://oss.6mate.cn/mini/copyBnts.png"
											mode=""></image>
										复制文案
									</view>
								</view>
								<!-- <view class="btnItem">
									<view @click="download(item.imageUrls)" class="btn">
										<image src="
https://oss.6mate.cn/mini/To-bottom.png"
											mode=""></image>
										快捷下载
									</view>
								</view> -->
							</view>
						</view>

					</view>
				</view>

				<view v-else-if="item.circleType=='IMAGE'" class="detail">
					<view class="photo">
						{{item.circleCategoryName}}
					</view>
					<view class="pics">
						<view class="name">
							{{item.title}}
						</view>

						<view class="imgsBox">

							<u-upload :disabled="false" :deletable="false" :width="160" :height="160"
								:show-progress="false" :max-count="item.maxCount" :file-list="item.fileList"></u-upload>

						</view>
						<view class="bot">
							<view class="time">
								{{item.genTime}}
							</view>
							<view class="btngroup">
								<!-- <view class="btnItem">
									<view @click="copyTextToClipboard(item.content)" class="btn">
										<image src="
https://oss.6mate.cn/mini/copyBnts.png" mode=""></image>
										复制文案
									</view>
								</view> -->
								<view class="btnItem">
									<view @click="download(item.imageUrls)" class="btn">
										<image src="https://oss.6mate.cn/mini/To-bottom.png"
											mode=""></image>
										快捷下载
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view v-else-if="item.circleType=='TEXT_VIDEO'" class="detail">
					<view class="photo">
						{{item.circleCategoryName}}
					</view>
					<view class="pics">
						<view class="name">
							{{item.title}}
						</view>
						<view v-if="item.content" class="desc">
							<u-parse :html="item.content"></u-parse>
						</view>
						

						<view v-if="item.videoUrl" class="video">
							<video :poster="item.videoImageUrl" :src="item.videoUrl" controls
								style="width: 300rpx;height: 400rpx; border-radius: 10rpx; background-color: #ccc;"></video>

						</view>
						<view class="bot">
							<view class="time">
								{{item.genTime}}
							</view>
							<view class="btngroup">
								<view class="btnItem">
									<view @click="copyTextToClipboard(item.content)" class="btn">
										<image src="https://oss.6mate.cn/mini/copyBnts.png"
											mode=""></image>
										复制文案
									</view>
								</view>
								<view class="btnItem">
									<view @click="uploadVideo(item.videoUrl)" class="btn">
										<image src="https://oss.6mate.cn/mini/To-bottom.png"
											mode=""></image>
										快捷下载
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>

				<view v-else-if="item.circleType=='VIDEO'" class="detail">
					<view class="photo">
						{{item.circleCategoryName}}
					</view>
					<view class="pics">
						<view class="name">
							{{item.title}}
						</view>

						<view class="video">
							<!--  src="https://mk001.oss-cn-hangzhou.aliyuncs.com/icon/1.mp4"" -->
							<video :poster="item.videoImageUrl" :src="item.videoUrl" controls
								style="width: 300rpx;height: 400rpx; border-radius: 10rpx; background-color: #ccc;"></video>
							<!-- <video
							style="width: 300rpx;height: 400rpx; border-radius: 10rpx; background-color: #ccc;" 
							src="https://mk001.oss-cn-hangzhou.aliyuncs.com/icon/1.mp4"></video> -->
							<!--  :poster="item.videoImageUrl"  :src="item.videoUrl" -->

						</view>
						<view class="bot">
							<view class="time">
								{{item.genTime}}
							</view>
							<view class="btngroup">
								<!-- <view class="btnItem">
									<view @click="copyTextToClipboard(item.content)" class="btn">
										<image src="
https://oss.6mate.cn/mini/copyBnts.png" mode=""></image>
										复制文案
									</view>
								</view> -->
								<view class="btnItem">
									<view @click="uploadVideo(item.videoUrl)" class="btn">
										<image src="https://oss.6mate.cn/mini/To-bottom.png"
											mode=""></image>
										快捷下载
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>

			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<view v-else class="empty" style="padding-top: 150px;">
			<view v-if="!list1.length && senDate" class="emptyAddress-box">
				<u-empty text="暂无内容" mode="news"></u-empty>
			</view>
		</view>

		<u-calendar active-bg-color="#FA4A53" btn-type="error" range-color="rgba(250, 74, 83, 0.4)" active-color="#fff"
			v-model="show" mode="date" @change="change"></u-calendar>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				show: false,
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				keyword: '',
				date: '',
				circleCategoryId: '',
				paddingTop: ''
			}
		},

		onLoad(e) {
			this.circleCategoryId = e?.id
			uni.setNavigationBarTitle({
				title: e.title
			});
			this.getlist()
			this.getHieght()
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
				this.getlist();
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		methods: {

			// 视频下载开始
			uploadVideo(playUrl) {
				uni.showToast({
					title: "下载中",
					icon: "loading"
				})
				uni.downloadFile({
					url: playUrl, //文件路径
					success: (res) => {
						const {
							statusCode,
							tempFilePath
						} = res
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: tempFilePath,
								success: function(errMsg) {
							 	uni.showToast({
										mask: true,
										title: '保存成功'
									});
							 },
								fail: (errMsg) => {
									uni.showToast({
										mask: true,
										title: '保存失败'
									});
								},
								complete: (errMsg) => {

								}
							});
						}
					}
				});

			},

			download(imageUrl) {
				
				uni.showToast({
					title: "下载中",
					icon: "loading"
				})
				for (let i = 0; i < imageUrl.length; i++) {
					uni.downloadFile({
						url: imageUrl[i],
						success: downloadResult => {
							if (downloadResult.statusCode === 200) {
								// 下载成功，保存图片到系统相册
								uni.saveImageToPhotosAlbum({
									filePath: downloadResult.tempFilePath,
									success: () => {
										uni.showToast({
											title: '图片保存成功'
										});
									},
									fail: () => {
										uni.showToast({
											title: '图片保存失败',
											icon: 'none'
										});
									}
								});
							} else {
								uni.showToast({
									title: '图片下载失败',
									icon: 'none'
								});
							}
						},
						fail: () => {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none'
							});
						}
					});
				    // uni.downloadFile({
				    //     url: imageUrls[i],
				    //     success: (res) => {
				    //         if (res.statusCode === 200) {
				    //             uni.saveFile({
				    //                 tempFilePath: res.tempFilePath,
				    //                 success: (res) => {
				    //                     console.log('图片已保存到：' + res.savedFilePath);
				    //                 }
				    //             });
				    //         }
				    //     }
				    // });
				}
				
				

			},

			copyTextToClipboard(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000,
						});
					},
					fail: function() {

						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			change(e) {
				console.log(e, 3333);
				this.date = e.result

				// this.formData.page = 1
				// this.list1 = []
				// this.getlist();
				
				this.formData.page = 1;
				this.getlist('fresh');
			},
			getHieght() {
				uni.createSelectorQuery().select('.tops1').boundingClientRect((rect) => {
					console.log(rect.height, 66666);
					this.paddingTop = rect.height + 12 + 'px'
				}).exec()
			},



			search() {
				// this.formData.page = 1
				// this.list1 = []
				// this.getlist();
				this.formData.page = 1;
				this.getlist('fresh');
			},

			onPullDownRefresh() {
				this.formData.page = 1;
				// this.list1 = [];
				this.getlist('fresh');
			},
			getlist(type) {
				this.senDate = false;
				let query = {
					pageIndex: this.formData.page,
					pageSize: this.formData.pageSize,
					keyword: this.keyword,
					date: this.date,
					circleCategoryId: this.circleCategoryId //卡类型ID列表	
				}

				this.$u.api
					.friendCirclePage(query)
					.then((res) => {
						if(type=='fresh'){
							this.list1 = [];
						}
						this.senDate = true;
						if (res.code == 'ok') {
							this.total = res.data.entityCount;
							const newlist = res.data.entities;
							this.list1.push(...newlist);
							this.list1 = this.list1?.map(r => {
								return {
									...r,
									maxCount: r?.imageUrls?.length,
									fileList: r?.imageUrls?.map(img => {
										return {
											url: img
										}
									})
								}
							})
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {

						}
						uni.stopPullDownRefresh()
						uni.hideLoading();
					});
			}
		}
	}
</script>

<style scoped lang="scss">
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
	.crm {
		padding: 0;

		/deep/ .u-list-item {
			margin-top: 0 !important;
			margin-left: 0 !important;
			margin-right: 20rpx !important;
		}

		// /deep/ .u-preview-image {
		// 	border-radius: 8rpx 8rpx 0 0 !important;
		// }

		.toAppBox {
			margin: 0 auto;
			width: 670rpx;
			background: #FFFFFF;
		}

		.tops1 {
			background: #FFFFFF;
			padding: 0 32rpx 0;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 9;
		}

		.list {
			margin-top: -24rpx;


			.item {
				padding: 40rpx 40rpx 42rpx 32rpx;
				border-bottom: 2rpx solid #F5F5F5;

				&:last-child {
					border-bottom: none;
				}

				.detail {
					display: flex;
					align-items: flex-start;

					.photo {
						margin-right: 20rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 30rpx;
						width: 72rpx;
						height: 72rpx;
						background: #FA4A53;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.pics {
						flex: 1;

						.name {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 28rpx;
							color: #0F1417;
							line-height: 40rpx;
							margin-bottom: 16rpx;
						}

						.desc {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: rgba(15, 20, 23, 0.85);
							line-height: 33rpx;
							margin: 0 0 12rpx 0;
						}
					}

					.bot {
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.time {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: rgba(15, 20, 23, 0.6);
						}

						.btngroup {
							display: flex;
							align-items: center;

							.btnItem {
								flex: 1;
								margin-right: 52rpx;

								&:last-child {
									margin-right: 0;
								}
							}
						}
					}

					.btn {
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #FA4A53;
						line-height: 40rpx;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}
					}
				}


			}
		}



		.searchBox {
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.Scan-code {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}
		}

		.search {
			flex: 1;

			height: 64rpx;
			background: #FFFFFF;
			border-radius: 152rpx 152rpx 152rpx 152rpx;
			border: 2rpx solid #FA4A53;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.inp {
				flex: 1;
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				margin: 4rpx;
				width: 128rpx;
				height: 56rpx;
				background: #FA4A53;
				border-radius: 152rpx 152rpx 152rpx 152rpx;
			}
		}

	}
</style>
